<template>
	<div class="Home">
		<div class="full-page" ref="page">
			<div class="list" ref="container" @mousewheel="mouseWheel" @DOMMouseScroll="mouseWheel">
				<div class="item">
					<div class="solution box">
						<div class="company">
							<div class="one company_name animation textSpan van">
								<span v-if="">能量无限，未来源自我们 - 您的首选发电机公司！</span>
							</div>
							<div class="one company_name_en animation textSpan van">
								<span>Unlimited energy, the future comes from us - your preferred generator
									company!</span>
							</div>
						</div>
					</div>
				</div>

				<div class="item">
					<div class="company">
						<div class="w1600">
							<div class="about flex">
								<div class="name">
									<span>关于我们</span>
								</div>
								<div class="left">
									<div class="title">
										<div class="two subtitle animation" style="visibility: visible">
											<span>ABOUT
												<br>
												COMPANY
											</span>
										</div>
										<h3 class="two animation" style="margin-top: 20px;visibility: visible">
											<span> 广西弗兰鑫电气有限公司</span>
										</h3>
										<div class="two animation" style="visibility: visible">
											<span>
												广西弗兰鑫电气有限公司成立于XX年，由一群充满热情和经验丰富的电
												气工程师和业务专业人员共同创立。公司成立
												之初，我们深刻认识到电力作为现代社会不可或缺
												的基础资源，对经济发展和生活质量至关重要。
											</span>

										</div>
										<div class="two animation" style="visibility: visible">
											<span>
												出于对行业发展和客户需求的深刻理解，
												广西弗兰鑫电气有限公司成立的初衷便是为
												广大客户提供一站式的电气解决方案，以满
												足他们的多样化电力需求。我们汇聚了一支技术
												娴熟、服务热情的团队，秉承专业、诚信、创新、共
												赢的核心价值观，不断追求卓越，为客户提供可靠高效
												的发电器设备和完善的售后服务。
											</span>

										</div>
									</div>
									<div class="aboutMap two animation">
										<img style="width: 600px;height: 200px;" src="../../static/img/china.png"
											alt="">
										<!-- <img src="../../static/img/homeD.png" alt=""> -->
									</div>
								</div>
								<div class="right">
									<div class="two img animation">
										<img src="../../static/img/test01.png">
									</div>
									<div class="data">
										<div class="items two animation">
											<div class="tit">
												<b>3000</b>
												<sub>名</sub>
												<sup>+</sup>
											</div>
											<p>公司员工</p>
										</div>
										<div class="items two animation">
											<div class="tit">
												<b>3000</b>
												<sub>名</sub>
												<sup>+</sup>
											</div>
											<p>公司员工</p>
										</div>
										<div class="items two animation">
											<div class="tit">
												<b>3000</b>
												<sub>名</sub>
												<sup>+</sup>
											</div>
											<p>公司员工</p>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>

				<div class="item">
					<div class="product">

					</div>
				</div>
				<div class="item">
					<div class="product foots-home">
						<div class="foots-content">
							<foot></foot>
						</div>
					</div>
				</div>
				<div class="item">
				</div>
			</div>
		</div>
		<!-- 指示器 -->
		<!-- <div class="points">
        <div v-for="(e, i) in 4" class="item" :key="e" :class="itemIndex === i + 1 ? 'item-act' : ''"></div>
      </div> -->
	</div>
	</div>
</template>

<script>
	import foot from '../../components/foot/Foot.vue';
	export default {
		components: {
			foot
		},
		data() {
			return {
				isScroll: false, // 是否能滚动
				itemIndex: 1, // 当前下标
				len: 4, // 总个数
				animationList: [], //动画渲染数组
				animationListIcon: [] ,//动画渲染数组
			};
		},
		computed: {
			product() {
				return [{
					name: this.$t("volvoUnit.name"),
					info: this.$t("volvoUnit.introduce")
				}, {
					name: this.$t("perkinsUnit.name"),
					info: this.$t("perkinsUnit.introduce")
				}, {
					name: this.$t("cumminsUnit.name"),
					info: this.$t("cumminsUnit.introduce")
				}, {
					name: this.$t("upperEngineUnit.name"),
					info: this.$t("upperEngineUnit.introduce")
				}, {
					name: this.$t("nanTongPaouUnit.name"),
					info: this.$t("nanTongPaouUnit.introduce")
				}, {
					name: this.$t("nonMovingUnit.name"),
					info: this.$t("nonMovingUnit.introduce")
				}, {
					name: this.$t("yuchaiDisesl.name"),
					info: this.$t("yuchaiDisesl.introduce")
				}, {
					name: this.$t("weiChaiUnit.name"),
					info: this.$t("weiChaiUnit.introduce")
				}, {
					name: this.$t("weiManUnit.name"),
					info: this.$t("weiManUnit.introduce")
				}, {
					name: this.$t("keKeUnit.name"),
					info: this.$t("keKeUnit.introduce")
				}]
			}
		},
		methods: {
			//打开页面时淡出
			easeIn() {
				if (this.itemIndex === 1) {
					this.animationList = document.querySelectorAll(".one")
				} else if (this.itemIndex === 2) {
					this.animationList = document.querySelectorAll(".two")
					this.animationListIcon = document.querySelectorAll(".icon")
				}
				//设置延迟动画效果
				for (let i = 0; i < this.animationList.length; i++) {
					this.animationList[i].style.setProperty('--delay', `${i * 0.5}s`)
				}
				for (let i = 0; i < this.animationListIcon.length; i++) {
					this.animationListIcon[i].style.setProperty('--delay', `${i * 2}s`)
				}
			},
			handleMove() {
				this.isScroll = true;
				const scrollHeight = this.$refs.page.clientHeight;
				this.$refs.container.style.transform = `translateY(-${
          (this.itemIndex - 1) * scrollHeight
      }px)`;
				setTimeout(() => (this.isScroll = false), 800); // 防止连续滚动，加延时
			},
			mouseWheel(event) {
				var box = document.querySelector(".box");

				var span = document.querySelectorAll(".box span");
				if (this.isScroll) { // 防止连续滚动
					return false;
				}
				if (event.deltaY > 0) {
					if (this.itemIndex === this.len) return; // 最后一个禁止向下滚动
					this.itemIndex += 1;
					// 下滑隐藏导航栏
					box.style.animation = "nav-btm 0.3s ease-in"
					box.style.animationFillMode = "both"

				} else {
					if (this.itemIndex === 1) return; // 第一个禁止向上滚动
					this.itemIndex -= 1;
					// 上滑显示导航栏
					box.style.animation = "nav-top 0.3s ease-in"
					box.style.animationFillMode = "both"
					if (this.itemIndex !== 1) {
						box.style.backgroundColor = '#fff'
						for (let i = 0; i < span.length; i++) {
							span[i].style.color = "#333"
						}
					} else {
						box.style.backgroundColor = 'transparent'
						for (let i = 0; i < span.length; i++) {
							span[i].style.color = "#fff"
						}
					}

				}
				this.handleMove();
				this.easeIn()
			},
		},
		mounted() {
			this.easeIn()
			// 首页隐藏页底组件
			var containerFoot = document.querySelector(".container_foot");
			containerFoot.style.display = "none"
		},
		beforeDestroy() {
			var box = document.querySelector(".box");
			box.style.backgroundColor = 'rgba(0,0,0,20%)'

			var containerFoot = document.querySelector(".container_foot");
			containerFoot.style.display = "block"
			// var footBody = document.querySelector(".footBody");
			// footBody.style.backgroundImage = "url(require('../../static/img/homeB.jpg'))"
			// footBody.style.backgroundColor = "rgba(0, 0, 0, 0.6)"
		}
	}
</script>

<style scoped>
	body {
		overflow-y: scroll;
		scroll-behavior: smooth;
		transition: all 0.3s;
	}

	.Home {
		width: 100%;
		height: 100vh;
	}

	.solution {
		width: 100%;
		height: 100vh;
		background-image: url("../../static/img/homeB.jpg");
		background-size: cover;
		background-position: center;
		position: relative;
	}

	.solution .box {}

	/*公司名称*/
	.solution .company {
		position: absolute;
		top: 40%;
		left: 50%;
		transform: translate(-50%, -25%);
		text-align: center;
	}

	.company_name {
		font-size: 30px;
		color: #ffffff;
		font-weight: bolder;
	}

	.company_name_en {
		font-size: 20px;
		color: #ffffff;
		font-weight: bolder;
	}

	.animation {
		opacity: 0;
		animation: fadeInDown 1s cubic-bezier(0.56, 0.09, 0.49, 1.37) forwards var(--delay);
	}

	.company {
		width: 100%;
	}

	.company .w1600 .about {
		position: relative;
		background: url("../../static/img/aboutbg.png") no-repeat bottom center;
		width: 100%;
	}

	.about .name {
		position: absolute;
		top: 80px;
		left: 45%;
		font-size: 42px;
		color: #333;
		font-weight: bolder;
		transform: translate(-25%, -25%);
	}

	.about .left {
		width: 51%;
		padding-left: 20px;
	}

	.about .left .title {
		max-width: 740px;
	}

	.subtitle span {
		text-transform: uppercase;
		font-size: 36px;
		color: #e2e2e2;
		line-height: 1;
		font-weight: bolder;
		position: relative;
	}

	.title h3 {
		font-size: 36px;
		margin: 20px 0;
		color: #333;
		line-height: 1;
	}

	.subtitle span:after {
		content: "";
		left: 0;
		top: 0;
		z-index: 10;
		position: absolute;
		width: 100%;
		height: 100%;
		background-image: -webkit-linear-gradient(180deg, #fff, #fff 2px, transparent 2px, transparent 4px, #fff 4px, #fff 5px, transparent 5px, transparent 7px);
		background-image: linear-gradient(180deg, #fff, #fff 2px, transparent 2px, transparent 4px, #fff 4px, #fff 5px, transparent 5px, transparent 7px);
		background-repeat: repeat-y;
		background-size: auto 7px;
		z-index: 10;
	}

	.aboutMap {
		display: inline-block;
		font-size: 0;
		position: relative;
	}

	.aboutMap img {
		width: 600px;
		height: 80%;
	}

	.about .right {
		position: relative;
		width: 49%;
		padding-left: 20px;
		padding-top: 200px;
	}

	.about .right img {
		position: absolute;
		top: -120px;
		width: 600px;
		height: 340px;
	}

	.data .items {
		display: inline-block;
		width: 19%;
		font-size: 16px;
		margin-right: 8%;
		color: #555;
		vertical-align: top;
		border-bottom: 2px solid #aabecd;
		padding-top: 20px;
		padding-bottom: 20px;
	}

	.data .items:nth-child(2n) {
		padding-top: 90px;
	}

	.data .items .tit {
		display: inline-block;
		position: relative;
		line-height: 1;
		padding-right: 20px;
		margin-bottom: 20px;
	}

	.data .items b {
		font-family: 'OswaldRegular';
		font-weight: normal;
		color: #2d65bc;
		font-size: 48px;
	}

	.data .items sub {
		position: absolute;
		right: 0;
		bottom: 0;
		font-size: 16px;
	}

	.data .items sup {
		font-size: 26px;
		color: #2d65bc;
		line-height: 1;
		position: absolute;
		right: 0;
		top: 0;
	}

	/* 页底 */
	.foots-home {
		width: 100%;
		height: 100vh;
		background-image: url("../../static/img/homeB.jpg");
		background-size: cover;
		background-position: center;
		position: relative;
	}

	.foots-content {
		width: 100%;
		height: 350px;
		position: absolute;
		left: 0;
		bottom: 0;
	}

	/* 全屏滚动 */
	@keyframes fadeIn {
		from {
			opacity: 0;
			transform: translateY(100px);
		}

		to {
			opacity: 1;
			transform: translateY(0px);
		}
	}

	@keyframes slideLeft {
		from {
			opacity: 0;
			transform: translateX(-100%);
		}

		to {
			opacity: 1;
			transform: translateX(0px);
		}
	}

	@keyframes slideRight {
		from {
			opacity: 0;
			transform: translateX(100%);
		}

		to {
			opacity: 1;
			transform: translateX(0px);
		}
	}

	@keyframes slideUp {
		from {
			opacity: 0;
			transform: translateY(-100%);
		}

		to {
			opacity: 1;
			transform: translateX(0px);
		}
	}

	@keyframes slideDown {
		from {
			opacity: 0;
			transform: translateY(100%);
		}

		to {
			opacity: 1;
			transform: translateX(0px);
		}
	}

	.full-page {
		width: 100vw;
		height: 100vh;
		position: relative;
		overflow: hidden;

		.list {
			width: 100vw;
			transition: 0.6s;

			.item {
				height: 100vh;
				transition: 0.6s all;
				overflow: hidden;
			}
		}

		.points {
			position: fixed;
			top: 50%;
			transform: translateY(-50%);
			right: 10px;

			.item {
				width: 4px;
				height: 20px;
				margin-bottom: 25px;
				background-color: rgba($color: gray, $alpha: 0.5);
				transition: 0.6s;

				&.item-act {
					height: 50px;
					background-color: #fff;
				}
			}
		}
	}
</style>
